<template>
	<view class="container">
		<navigationBar custom :paddingStatusBar="false">
			<view class="top" :style="{paddingTop: `${paddingTop}px`,height:`${bgHeight}px`}">
				<view class="top-userinfo">
					<view class="top-userinfo-left">
						<view class="top-userinfo-left-company overflowEllipsis">江苏和正特种装备有限公司</view>
						<view class="top-userinfo-left-operation">
							<dropdown :list="list" @select="onSelect">
								<view class="top-userinfo-left-operation-username">{{ userinfo.userAccount }}</view>
							</dropdown>
						</view>
						<view class="top-userinfo-left-id">ID：{{userinfo.userid}}</view>
					</view>
					<view class="top-userinfo-righLt">
						<view class="top-userinfo-right-avatar">
							<image src="/@/static/images/logo.png"></image>
						</view>
					</view>
				</view>
				<view class="top-total">
					<view class="top-total-title">系统概览</view>
					<view class="top-total-main">
						<view class="top-total-main-item">
							<view class="top-total-main-item-top">
								<view class="top-total-main-item-top-title">在线机器人</view>
								<view class="top-total-main-item-top-icon">
									<image src="/@/static/images/zaixian.png"></image>
								</view>
							</view>
							<view class="top-total-main-item-bottom">
								<view class="top-total-main-item-bottom-text">{{onlineNum}}/{{robotList.length}}</view>
								<view class="top-total-main-item-bottom-process">
									<!-- <view class="top-total-main-item-bottom-process-bar" :style="{width:'50%'}"></view> -->
									<view class="top-total-main-item-bottom-process-bar"
										:style="{width:`${onlinePercent}%`}"></view>
								</view>
							</view>
						</view>
						<view class="top-total-main-item">
							<view class="top-total-main-item-top">
								<view class="top-total-main-item-top-title">机器人故障</view>
								<view class="top-total-main-item-top-icon">
									<image src="/@/static/images/guzhang.png"></image>
								</view>
							</view>
							<view class="top-total-main-item-main">
								<view class="top-total-main-item-main-label">{{faultNum}}</view>
								<view class="top-total-main-item-main-status">需检修</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</navigationBar>

		<view class="module">
			<view class="module-title">机器人状态</view>
			<view class="module-item" v-for="item in robotList" :key="item.robotId">
				<view class="module-item-title">
					<view class="module-item-title-left">
						<view class="module-item-title-left-status"
							:class="`module-item-title-left-status${item.online}`"></view>
						<!-- <view class="module-item-title-left-status"
								:class="`module-item-title-left-status1`"></view> -->
						<view class="module-item-title-left-title">{{ item.robotName }}</view>
					</view>
					<view class="module-item-title-right" :class="`module-item-title-right-status${item.fault}`">
						<!-- <view class="module-item-title-right" :class="`module-item-title-right-status2`"> -->
						<view v-if="item.vehicleStatus != null || item.vehicleStatus != undefined">
							{{item.vehicleStatus}}</view>
						<view v-else>无数据</view>
					</view>
				</view>
				<view class="module-item-main">
					<view class="module-item-main-item-label">电量</view>
					<view class="module-item-main-item-label">油量</view>
					<view class="module-item-main-item-label">速度</view>

					<view class="module-item-main-item-value">{{ item.soc }}</view>
					<view class="module-item-main-item-value">{{ item.oil }}</view>
					<view class="module-item-main-item-value">{{ item.speeds }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue"
	import {
		getStatusBarHeight,
		removeLocalStorage,
		showMessage,
		getLocalStorage
	} from "/@/utils/util";
	import {
		STORAGE_KEY
	} from "/@/config/constant";
	import {
		userApi
	} from "/@/api/login";

	const list = [{
			label: "切换账号",
			value: 1
		},
		{
			label: "退出",
			value: 2
		},
	]

	let robotList = ref([])
	let onlineNum = ref(0)
	let faultNum = ref(0)
	let onlinePercent = ref(0)

	const paddingTop = ref(20)
	const bgHeight = ref()
	let userinfo = ref({
		userName: "某某"
	})

	onShow(() => {
		paddingTop.value = getStatusBarHeight() + 26
		bgHeight.value = 290 - getStatusBarHeight()

		userinfo = JSON.parse(getLocalStorage(STORAGE_KEY.userInfo));
		let reqData = {
			userId: userinfo.userid
		}
		userApi(reqData).then(res => {
			if (res && res.data) {
				robotList.value = res.data;
				onlineNum.value = res.data[0].onlineNum;
				faultNum.value = res.data[0].faultNum;
				onlinePercent.value = (onlineNum.value / robotList.value.length) * 100;
			} else {
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
		})
	})

	const onSelect = (e) => {
		if (e.value === 1) {
			uni.showToast({
				title: '暂无账号切换',
				icon: 'none'
			})
		} else if (e.value === 2) {
			removeLocalStorage(STORAGE_KEY.userInfo)
			showMessage("退出成功")
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "userCenter";
</style>